<template>
  <div>{{name}}-- {{age}}</div>
  <input type="text" placeholder="请输入" ref="inputRef" />
  <el-button type="primary" @click="btnClick">获取ref</el-button>
  <br>
  <input type="text" placeholder="请输入" v-model="inputValue" >
  <div>{{inputValue}}</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, computed, watch,watchEffect,toRefs,customRef } from "vue";
function useDebounceValue<T> (value:T,delay=200) {
  let timer:any = null;
  return customRef((track,trigger)=>{
    return {
      get () {
        track()
        return value
      },
      set (newVal: T) {
        clearTimeout(timer);
        timer = setTimeout(()=>{
          value = newVal
          trigger()
        },delay)
      } 
    }
  })
}
export default defineComponent({
  setup(props) {
   var state = reactive({name:'李四',age:33})
   var inputRef = ref(null)
  // let inputValue = ref('abc')
   setInterval(()=>{
       state.age += 1
   },1000)
  function btnClick () {
  }
  let inputValue = useDebounceValue('abc',300)
    return {
        // 这种方式非常好，可以用reactive 定义大量的数据 然后暴露不需要一个一个暴露，同时在template中改变状态
        // 不用想ref一样 需要.value 来实现 非常的方案
        ...toRefs(state),
        btnClick,
        inputRef,
        inputValue,
        // debounceValue
    };
  }
});
</script>
<style>
</style>

